﻿@using PermissionManager.Model;
@{
    Layout = null;
    List<Menu> list = null;
    if (ViewBag.list != null)
    {
        list = ViewBag.list;
    }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/style.css" />
    <link href="~/assets/css/codemirror.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/assets/css/ace.min.css" />
    <link rel="stylesheet" href="~/font/css/font-awesome.min.css" />
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="~/js/jquery-1.9.1.min.js"></script>
    <script src="~/assets/js/bootstrap.min.js"></script>
    <script src="~/assets/js/typeahead-bs2.min.js"></script>
    <script src="~/assets/js/jquery.dataTables.min.js"></script>
    <script src="~/assets/js/jquery.dataTables.bootstrap.js"></script>
    <script src="~/assets/layer/layer.js" type="text/javascript"></script>
    <script src="~/assets/laydate/laydate.js" type="text/javascript"></script>
    <link rel="stylesheet" href="~/layui/css/layui.css" media="all" />
    <script src="~/layui/layui.js" charset="utf-8"></script>
    <title>系统栏目</title>
</head>

<body>
    <div class="Columns_style margin">
        <div id="Menu_add" class="btn btn-warning" title="添加权限"><i class="fa fa-plus"></i> 添加菜单</div>
        <table class="table table-striped table-bordered table-hover" id="sample-table" lay-filter="test">
            @*<thead>
                <tr>
                    <th width="80px">ID</th>
                    <th width="80px">排序</th>
                    <th width="120px">栏目名称</th>
                    <th width="120px">等级</th>
                    <th width="">说明</th>
                    <th width="150px">添加时间</th>
                    <th width="100px">状态</th>
                    <th width="250px">操作</th>
                </tr>
            </thead>*@
        </table>
        <!--添加菜单-->
        <div id="add_administrator_style" class="add_menber" style="display:none">
            <form action="" method="post" id="form-admin-add">
                <div class="form-group">
                    <label class="form-label"><span class="c-red">*</span>菜单名称：</label>
                    <div class="formControls">
                        <input type="text" class="input-text" value="" placeholder="" id="Menu-name" name="user-name" datatype="*2-16" nullmsg="菜单名称不能为空" />
                    </div>
                    <div class="col-4"> <span class="Validform_checktip"></span></div>
                </div>
                <div class="form-group">
                    <label class="form-label"><span class="c-red">*</span>菜单地址：</label>
                    <div class="formControls">
                        <input type="text" id="Url" placeholder="地址" autocomplete="off" value="" class="input-text" nullmsg="菜单地址不能为空" />
                    </div>
                    <div class="col-4"> <span class="Validform_checktip"></span></div>
                </div>
                <div class="form-group">
                    <label class="form-label"><span class="c-red">*</span>排序：</label>
                    <div class="formControls">
                        <input type="text" id="SortId" placeholder="排序" autocomplete="off" value="" class="input-text" nullmsg="排序不能为空" />
                    </div>
                    <div class="col-4"> <span class="Validform_checktip"></span></div>
                </div>
                <div class="form-group">
                    <label class="form-label"><span class="c-red">*</span>是否启用：</label>
                    <div class="formControls">
                        <input type="checkbox" class="layui-unselect layui-form-switch layui-form-onswitch" id="Star_checked" name="close" lay-skin="_switch" lay-text="启用|禁用" checked=checked checked=checked checked=checked checked=checked />（默认启用）
                    </div>
                    <div class="col-4"> <span class="Validform_checktip"></span></div>
                </div>
                <div class="form-group">
                    <label class="form-label"><span class="c-red">*</span>父级：</label>
                    <div class="formControls ">
                        <span class="select-box" style="width:150px;">
                            <select id="select" class="select" name="admin-role" size="1">
                                <option value="0">父级</option>
                                @foreach (var item in list)
                                {
                                    <option value="@item.Id">@item.Name</option>
                                }
                            </select>
                        </span>
                    </div>
                </div>
                <div>
                    <input type="button" class="btn btn-primary radius" id="Add_Menu" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" />
                </div>
            </form>

        </div>
    </div>
</body>
</html>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="staor">
    <input type="checkbox" name="yyy" lay-skin="switch" lay-filter="switchTest" value="{{d.Id}}" id="staro" lay-text="已启用|未启用" {{d.IsShow?'checked':''}}={{d.IsShow?'checked':''}} />
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#sample-table'
            , url: '/Menu/GetMenu/'
            , cols: [[
                { field: 'Id', width: 80, title: 'ID', sort: true }
                , { field: 'Name', width: 115, title: '菜单名称', sort: true }
                , { field: 'Url', width: 200, title: '菜单地址' }
                , { field: 'Icon', title: '菜单图标', width:120  }
                , { field: 'SortId', width: 80, title: '排序', sort: true }
                , { field: 'CreateUserId', width: 100, title: '创建人', sort: true,hide: true  }
                , { field: 'CreateTime', width: 180, title: '创建时间', sort: true, templet: "<div>{{Format(d.CreateTime,'yyyy-MM-dd hh-mm-ss')}}</div>"  }
                , { field: 'IsShow', width: 120, title: '状态', toolbar: '#staor' }
                , { field: 'wealth', width: 135, title: '操作', sort: true,align:'center', toolbar: '#barDemo' }
            ]]
            , page: true
        });


        //删除
        function del(id) {
            var data = {};
            data.Id = id;
        $.ajax({
            type: "post",
            url: "/Menu/DeleteMenuInfo",
            data: data,
            success: function (json) {
                location.reload();
                if (json.Success) {
                         layer.alert('删除成功！', {
                            title: '提示框',
                            icon: 1,
                        }, function () {
                            location.href = "/Menu/MenuSection";
                            });
                } else {
                     layer.alert('修改失败！', {
                            title: '提示框',
                            icon: 0,
                        });
                        layer.close(MenuSection);
                }
            }
        });
    }
        table.on('tool(test)', function (obj) {
              //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
      if (layEvent === 'detail') {
      
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构
          del(data.Id);
        layer.close(index);
        //向服务端发送删除指令
      });
      } else if (layEvent === 'edit') {
          layer.open({
               type: 1,
               title: '编辑菜单',
               area: ['700px', ''],
              shadeClose: false,
              anim: 2,
               content: $('#add_administrator_style'),
          cancel: function(index, layero){ 
                location.href = "/Menu/MenuSection";
            }    
          });
          $("#Menu-name").val(data.Name);
          $("#Url").val(data.Url);
          $("#SortId").val(data.SortId);
          $('#Star_checked').attr('checked', data.IsShow);
          $("#select").val(data.ParentId);
          $("#Add_Menu").click(function () {
              var date = {};
              date.Id = data.Id;
              date.Name=$("#Menu-name").val();
              date.Url=$("#Url").val();
              date.SortId=$("#SortId").val();
              date.ParentId=$("#select").val();
              date.IsShow = $("#Star_checked").prop("checked");
            $.ajax({
                type:"post",
                url: "/Menu/UpdateMenuInfo",
                data: date,
                success: function (json) {
                    if (json.Success) {
                        layer.alert('修改成功！', {
                            title: '提示框',
                            icon: 1,
                        }, function () {
                            location.href = "/Menu/MenuSection";
                            });
                        
                    } else {
                        layer.alert('修改失败！', {
                            title: '提示框',
                            icon: 0,
                        });
                        layer.close(MenuSection);
                    }
            }
            });
          })
      }
        });
        //添加菜单
        $("#Menu_add").click(function () {
            layer.open({
               type: 1,
               title: '添加菜单',
               area: ['700px', ''],
                shadeClose: false,
               anim: 2,
                content: $('#add_administrator_style'),
               cancel: function(index, layero){ 
                location.href = "/Menu/MenuSection";
            }    
          });
          $("#Add_Menu").click(function () {
              var date = {};
              date.Name=$("#Menu-name").val();
              date.Url=$("#Url").val();
              date.SortId=$("#SortId").val();
              date.ParentId=$("#select").val();
              date.IsShow = $("#Star_checked").prop("checked");
            $.ajax({
                type:"post",
                url: "/Menu/AddMenuInfo",
                data: date,
                success: function (json) {
                    if (json.Success) {
                        layer.alert('添加成功！', {
                            title: '提示框',
                            icon: 1,
                        }, function () {
                            location.href = "/Menu/MenuSection";
                            });
                        
                    } else {
                        layer.alert('添加失败！', {
                            title: '提示框',
                            icon: 0,
                        });
                        layer.close(MenuSection);
                    }
            }
            });
          });
            });

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            var date = {};
            date.Id = this.value;
            date.IsShow = $("input").prop("checked");
            $.ajax({
                type:"post",
                url: "/Menu/UpdateIsShow",
                data: date,
                success: function (json){
                    if (json) {
                        layer.alert('已修改！', {
                            title: '提示框',
                            icon: 1,
                        },function () { location.href = "/Menu/MenuSection";});
                    } else {
                        layer.alert('修改失败！', {
                            title: '提示框',
                            icon: 1,
                        });
                        layer.close(MenuSection);
                    }
            }
            });
        });
    })
    });
        function Format(datetime, fmt) {
    var newtime = datetime.replace(/\/Date\((\d+)\)\//gi, "$1");
    if (parseInt(newtime) == newtime) {
        if (newtime.length == 10) {
            newtime = parseInt(newtime) * 1000;
        } else if (newtime.length == 13) {
            newtime = parseInt(newtime);
        }
    }
    newtime = new Date(newtime);
    var o = {
        "M+": newtime.getMonth() + 1,                 //月份
        "d+": newtime.getDate(),                    //日
        "h+": newtime.getHours(),                   //小时
        "m+": newtime.getMinutes(),                 //分
        "s+": newtime.getSeconds(),                 //秒
        "q+": Math.floor((newtime.getMonth() + 3) / 3), //季度
        "S": newtime.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (newtime.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
        };
</script>
@*<script>
        $(function () {
            var oTable1 = $('#sample-table').dataTable({
                "aaSorting": [],//默认第几个排序
                "bStateSave": false,//状态保存
                //"dom": 't',
                "bFilter": false,
                "aoColumnDefs": [
                    //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                    { "orderable": false, "aTargets": [0, 1, 2, 3, 4, 5, 6, 7] }// 制定列不参与排序
                ]
            });
            $('table th input:checkbox').on('click', function () {
                var that = this;
                $(this).closest('table').find('tr > td:first-child input:checkbox')
                    .each(function () {
                        this.checked = that.checked;
                        $(this).closest('tr').toggleClass('selected');
                    });

            });
        })
        /*栏目-停用*/
        function member_stop(obj, id) {
            layer.confirm('确认要停用该栏目吗？', function (index) {
                $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="fa fa-close bigger-120"></i></a>');
                $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">停用</span>');
                $(obj).remove();
                layer.msg('停用!', { icon: 5, time: 1000 });
            });
        }

        /*栏目-启用*/
        function member_start(obj, id) {
            layer.confirm('确认要启用该栏目吗？', function (index) {
                $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="fa fa-check bigger-120"></i></a>');
                $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">启用</span>');
                $(obj).remove();
                layer.msg('启用!', { icon: 6, time: 1000 });
            });
        }
        /*店铺-删除*/
        function member_del(obj, id) {
            layer.confirm('确认要删除吗？', { icon: 0, }, function (index) {
                $(obj).parents("tr").remove();
                layer.msg('已删除!', { icon: 1, time: 1000 });
            });
        }
    </script>*@
